<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>约球神器</title>
		<link rel="stylesheet" type="text/css" href="../css/std.css"/>
		<link rel="stylesheet" type="text/css" href="../js/powerFloat/powerFloat.css"/>
		<script type="text/javascript" src="../js/jquery-1.7.1.js">	</script>
		<script type="text/javascript" src="../js/common.js">	</script>
		<script type="text/javascript" src="../js/powerFloat/jquery-powerFloat.js">	</script>
		<style>
			body{background-color: white}
			h1,h2,h4,h5{font-weight: normal}
			div{border: 0px solid #999999;}
			.box_shadow{
				filter:progid:DXImageTransform.Microsoft.Shadow(color=#808080,direction=120,strength=4);
				-moz-box-shadow: 2px 2px 10px #808080;
				-webkit-box-shadow: 2px 2px 10px #808080;
				box-shadow:2px 2px 10px #808080;
			}
			.r_pal h3{margin-top: 30px;color: #999999;border-width: 0px;padding:0px}
			.fixdiv{font: 0px/0px sans-serif;clear: both;display: block;}
			.topNav{font-size: 18px;margin-left: 30px;}
			.detail{margin-top: 5px;margin-left: 50px;overflow: visible}
			.pl{margin-left: -40px;color: #999999;overflow: visible}
			.srch_btn{width: 30px;height: 30px;position: absolute;margin-left: 265px;cursor: pointer;margin-top: 13px;}
			.srch_inpt{width: 250px;height: 30px;padding-left: 10px;padding-right: 40px;font: 16px microsoft yahei;border: 1px solid #bbbbbb;border-radius:5px;margin-top: 10px}
			.l_pal{display: table-cell;width: 620px;vertical-align: top;padding: 30px 10px;float: left}
			.l_pal div{}
			.infoCard{background-color: #f2f2f2;border: 1px solid #DEDEE0;}
			.r_pal{width: 310px;vertical-align: top;padding-left: 10px;color:white;display: table-cell;padding-bottom: 30px;}
			.organizer{height: 120px;}
			.organizer_name{padding-left: 10px;height: 60px;line-height: 60px;display: inline-block;color: #0F91CF;overflow: hidden;position: relative}
			.organizer_content li{height: 60px;cursor: pointer;}
			.menbers li{cursor: pointer;width: 60px;height: 60px;}
			.r_pal li img{width: 60px;height: 60px;}
			.table table{width: 100%;border-bottom: 1px dashed #cccccc;}
			.table tr{cursor: pointer;}
			.table td{border-top: 1px dashed #cccccc;}
			.mtr_num{font-size: 30px; font-family:Segoe UI;}
			.footer{padding-bottom: 30px;padding-top: 10px;}
			.footer li{margin-right: 10px;}
		</style>
	</head>

	<body>
		
		<!--TOP-->
		<div class="hc">
			<!--LOGO & NAV-->
			<div style="display: inline-block;width: 630px;vertical-align: top;float: left">
				<div style="height: 70px;color: #0F91CF;font-size: 60px;font-family: Segoe UI;text-shadow: 1px 1px 1px #C1E0FF;display: inline">
					BALL FRIEND
				</div>
				<a href="#" id="placeSelector" style="margin-left: -10px;font-size: 16px;">广州</a>
				<div class="fixdiv"> </div>
			</div>
			<div style="padding-top: 10px;padding-bottom: 10px;">
				<div style="float: right">
					<a href="#">注册</a>
					<a href="#">登录</a>
				</div>
				<!--SEARCH-->
				<div style="display: inline-block;width: 290px;vertical-align: top;float: right;margin-right: 10px">
					<div>
						<img src="../image/btn_search.png" class="srch_btn"/>
						<input type="text" class="srch_inpt" maxlength="18" value="搜索活动...."/>
					</div>
					<div class="fixdiv"> </div>
				</div>
				<div class="fixdiv"> </div>
			</div>
		</div>
		
		
		<!--CONTENT-->
		<div class="hc box_shadow" style="margin-top: 10px;background-color: white;clear: both;position: relative;border: 1px solid #DEDEE0">
			
			<!--LEFT PANEL-->
			<div class="l_pal">
				
				<!--BASIC INFO-->
				<div class="infoCard" id="infoCard">
					<img src="http://60.194.110.42/M00/0A/BD/PMJuKk_F8OT5eA41AA1AADGo7rc23.jpeg" style="width: 170px;height: 260px;float: left"/>
					<div style="width: 410px;display: inline-block;vertical-align: top;margin-left: 10px;">
						<h1 style="padding-bottom: 10px">周末羽毛球1VS1</h1>
						<div class="detail">
			                <span class="pl">时间:&nbsp;&nbsp;</span>7月1日 15:00 - 17:00
			            </div>
			            <div class="detail">
			                <span class="pl">地点:&nbsp;&nbsp;</span>广州 天河区 天河路383号太古汇商场地铁上层MU35号方所fangsuo commune
			            </div>
			            <div class="detail">
			                <span class="pl">费用:&nbsp;&nbsp;</span>免费
			            </div>
			            <div class="detail">
			                <span class="pl">类型:&nbsp;&nbsp;</span><a href="#">讲座/沙龙</a>
			            </div>
			            <div class="detail">
			                <span class="pl">发起人:</span><a href="#">南都思享汇</a>
			            </div>
			            <div style="text-align: right;">
			            	<span class="btn">感兴趣</span>
			            	<span class="btn_unable" style="margin:0 20px;">已参加</span>
			            </div>
			            <div class="fixdiv"> </div>
					</div>
					<div class="fixdiv"> </div>
				</div>
				
				<!--DETAILS-->
				<div>
					<h3>活动详情</h3>
					<div style="padding-left: 20px;">
						<span id="detail"> </span>
						<span id="exInfo" style="display: none"> </span>
						<span id="ellipsis" style="display: none">....</span>
						<span id="btn_toggle" style="color: #0F91CF;cursor: pointer;display: none">[详细]</span>
					</div>
				</div>
				
				<!--PUBLISHER-->
				<div>
					<h3>活动相关小站</h3>
					<div style="padding-left: 20px">
						<img src="http://60.194.110.42/M00/0A/BD/PMJuKk_F8OT5eA41AA1AADGo7rc23.jpeg" style="width: 70px;height: 70px;"/>
						<div style="width: 430px;display: inline-block;vertical-align: top;margin-left: 10px;">
							<a href="#">HUFF PIK</a>
							<span>主办方</span>
							<div class="detail" style="margin-top: 20px;">
				                <span class="pl">活动类型:&nbsp;&nbsp;</span>其他 展览 讲座/沙龙
				            </div>
						</div>
					</div>
				</div>
				
				<!--Q&A-->
				<div>
					<h3>我来问主办方</h3>
					<div class="detail">
						还没有人提问
					</div>
				</div>
				
				<!--FORUM-->
				<div style="margin-bottom: 30px;">
					<h3>本活动论坛</h3>
					<div class="table" style="padding-left: 20px">
						<table border="0px" cellpadding="5" cellspacing="0">
							<tr>
								<td width="50%" class="f_title">基佬可以参加吗?</td>
								<td width="18%">基情岁月</td>
								<td width="18%">8人回应</td>
								<td width="14%">2011-6-30</td>
							</tr>
							<tr>
								<td class="f_title">reefrefe</td>
								<td>fafdassd</td>
								<td>fafdassd</td>
								<td>2011-6-30</td>
							</tr>
							<tr>
								<td class="f_title">tsgregrr</td>
								<td>fafdassd</td>
								<td>fafdassd</td>
								<td>2011-6-30</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="fixdiv"> </div>
			</div>
			
			<!--RIGHT PANEL-->
			<div class="r_pal">
				
				<!--ORGANIZER-->
				<div>
					<h3 style="padding-top: 0px">活动组织者</h3>
					<div class="organizer_content">
						<ul class="list">
							<li>
								<div style="width: 60px;height: 60px;display: inline-block;float: left">
									<img src="http://60.194.110.42/M00/0C/A1/PMJuKk_inAm07KeyAAAV16Z_hSU29.jpeg"/>
								</div>
								<div class="organizer" style="display: inline-block">
									<div class="mtr_num organizer_name">HUFF PIK</div>
									<div style="height: 60px;padding-left: 10px;overflow: hidden">
										<div style="color: blue">运动达人</div>
										<div style="color: #999999">(659人关注)</div>
										<div style="color: #999999">今天的菜好辣....</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div>
					<span><span class="mtr_num">20</span>人感兴趣</span>
					<span style="margin-left: 10px;"><span class="mtr_num">5</span>人已参与</span>
				</div>
				
				<!--MEMBER LIST-->
				<div>
					<h3>活动成员</h3>
					<div class="menbers">
						<ul class="list">
							<li><img src="http://60.194.110.42/M00/0C/A1/PMJuKk_inAm07KeyAAAV16Z_hSU29.jpeg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/l/53/3526953.jpg"/></li>
							<li><img src="http://60.194.110.42/M00/08/98/PMJuKk-8nQ32DnlDAAAyLJdGDaQ56.jpeg"/></li>
							<li><img src="http://60.194.110.42/M00/09/F3/PMJuKk_FzQyVT2KvAAAetOdML5I24.jpeg"/></li>
							<li><img src="http://60.194.110.42/M00/09/67/PMJuKk_DHMOWERG0AAAOdejR3B455.jpeg"/></li>
							<li><img src="http://60.194.110.42/M00/0C/67/PMJuKk_VrBuLuxVnAAAcCWqhvp852.jpeg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/s/83/1467483.jpg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/s/97/1848197.jpg"/></li>
							<li><img src="http://image.songtaste.com/images/abu/n/o/3O47AOons.jpg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/s/02/1760202.jpg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/s/00/86500.jpg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/s/18/151918.jpg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/s/20/25920.jpg"/></li>
							<li><img src="http://image.songtaste.com/images/usericon/s/87/1307187.jpg"/></li>
						</ul>
					</div>
				</div>
				<!--MAP-->
				<div>
					<h3 style="padding-top: 0">活动地图</h3>
					<div>
						<img src="http://60.194.110.42/M00/0C/67/PMJuKk_VnBa1YeTcAAFAAOrmxp0921.png" style="width: 300px;height: 240px;"/>
					</div>
				</div>
				
				<!--RECOMMENDED-->
				<div>
					<h3>热门活动</h3>
					<div>
						<img src="http://60.194.110.42/M00/0C/66/PMJuKk_VlOqFgWHSAADAAEhWWEg72.jpeg" style="width: 300px;height: 300px;"/>
					</div>
				</div>
				<div class="fixdiv" > </div>
			</div>
			<div class="fixdiv" > </div>
		</div>
		
		<!--LINE-->
		<div class="hr" style="margin-top: 20px"> </div>
		
		<!--FOOTER-->
		<div class="hc footer">
			<div style="float: left">&copy; 2012</div>
			<div style="float: right">
				<ul class="list">
					<li><a href="#">关于我们</a></li>
					<li><a href="#">帮助中心</a></li>
					<li><a href="#">手机版本</a></li>
					<li><a href="#">免责申明</a></li>
				</ul>
			</div>
		</div>
		
		
		<!--POPUP BOXES-->
		<!--member basic info box-->
		<div id="memberInfo" style="width:200px; padding:5px; overflow:hidden;background-color: white;border: 1px solid #CCCCCC;display: none">
				<div style="float: left;">
					<img title="秦海璐" src="http://tp3.sinaimg.cn/1211710022/50/1279875455/0" />
				</div>
				<div style="padding-left:60px;">
					<span>秦海璐</span>
					<span style="color: #999999">(236人关注)</span>
					<div style="font-size: 12px;color: #999999;padding-top: 10px;">"喜欢！今晚我抱你睡了！哈哈哈"</div>
		    	</div>
		</div>

	<script type="text/javascript">
		//<![CDATA[
	
		//GET DATA
		var activity = {
			"id":342543,
			"title":"周末羽毛球1VS1",
			"startDate":"5月3日",
			"endDate":"7月9日",
			"organizer":"HUFF PIK",
			"organizerId":3453,
			"addr":"广州 天河区 天河路383号太古汇商场地铁上层MU35号方所fangsuo commune",
			"expense":"免费",
			"category":"其他 展览 讲座/沙龙",
			"description":'7月2日晚7点半活动，请留下你的手机号码，我会提前通知。<br/><br/>【puffy写在活动之前】<br/>关于专注力，作为自由职业最在乎的是，用少的时间做到最好效果，这样才能在生活里偷时间，做更多自己喜欢的事情。纵观我这7年的工作，最大的爱好就是想办法怎么节约时间不加班了。<br/>如果你总为一些小事情分心工作，为此心烦意乱导致效率低下，或者你总是同事处理很多项目，在没有完成的情况下，又急着抓起另一项，反而什么都做不好。<br/>就像谈恋爱，在和另一半交往的时候，会被EX影响情绪，最后都是什么都木有啊。做一件事，肯定它，专注它，不要过分贪心，你会得到所有你想要的。<br/>专注能力和洞见力是天然的同盟，心力集中不可动摇的专注状态可以通过冥想去锻炼。沉浸在呼吸的感觉中，被它吸引，完全察觉不到任何其他事物，排除一切事物的干扰。<br/><br/>【讨论内容】<br/>专注注意力的目的是：保持对你注意力的良好控制，当你把你的注意力集中在某个事物上时，他能听话地集中在那里，而当你想要让注意力转移到别的事物上时，它会随你的心意发生转移。强化你对注意力的控制能力是优化和重塑大脑的与意志的最佳方式。'
		};
		
		var pStatus = {
			'brief' : false,
			'closed' : true
		}
		
		initInfo();
		bindBtn();
		//alert(getUrlArg("wr"));
		
		//INITIALIZE PAGE
		function initInfo () {
			if(activity.description.length>150){
				pStatus.brief = true;
				$('#detail').empty().append('<span>'+activity.description.substring(0,150)+'</span>').show();
				$('#exInfo').empty().append('<span>'+activity.description.substring(150,activity.description.length)+'</span>');
				$('#ellipsis').show();
				$('#btn_toggle').empty().append('<span>[展开]</span>').show();
				pStatus.closed = true;
			}
			else{
				pStatus.brief = false;
				$('#detail').empty().append('<span>'+activity.description+'</span>').show();
			}
		}
		
		//BIND BUTTONS EVENT
		function bindBtn(){
			//PLACES SWITCH
			$('#placeSelector').powerFloat({
			    width: 60,
			    target: [
			        {
			            href: "newAct.html?wt=cq",
			            text: "重庆"	
			        },
			        {
			            href: "##",
			            text: "上海"	
			        },
			        {
			            href: "##",
			            text: "成都"	
			        },
			        {
			            href: "##",
			            text: "武汉"	
			        },
			        {
			            href: "##",
			            text: "深圳"	
			        }
			    ],
			    targetMode: "list"	
			});
			
			//SEARCH TIPS
			$(".srch_inpt").textRemindAuto();
			
			//DETAIL BUTTON EVENT
			$('#btn_toggle').click(function() {
				if(pStatus.brief && pStatus.closed){
					$('#ellipsis').hide();
					$('#exInfo').show();
					$('#btn_toggle').empty().append('<span>[收起]</span>');
					pStatus.closed = false;
				}
				else{
					$('#ellipsis').show();
					$('#exInfo').hide();
					$('#btn_toggle').empty().append('<span>[展开]</span>');
					pStatus.closed = true;
				}
			});
			
			//FORUM LIST EVENT
			$('.table tr').each(function(index) {
				$(this).mouseover(function() {
					$(this).css('background-color','#0F91CF').css('color','white');
				}).mouseout(function() {
					$('.table tr').css('background-color','').css('color','');
				});;
			});

			$('.organizer_content li').each(function(index) {
				$(this).unbind('mouseover').mouseover(function() {
					$(this+' div div[class=organizer_name]').animate({'margin-top':'-30px'},"fast");
					//$(this).children(".organizer").animate({top:60},"slow");
				}).unbind('mouseout').mouseout(function() {
					$(this+'[class=organizer] div:first-child').animate({'margin-top':'0px'},"fast");
				});;
			});
			
			//MEMBER AVATAR EVENT
			$(".menbers li").each(function(index) {
				$(this).unbind('mouseover').bind('mouseover', function() {
					$(this).css("background-color","black");
					$(this).children("img").css("opacity","0.4");
				}).unbind('mouseout').bind('mouseout', function() {
					$(this).css("background-color","");
					$(this).children("img").css("opacity","");
				});
				$(this).powerFloat({
					width:200,
					eventType:"hover",
				    targetMode: "common",
				    target: $("#memberInfo"),
				    reverseSharp: true
				});
			});
			
		}
		
		//]]>
	</script>
	</body>
</html>
